<script lang="ts">
	let x = 500;
	let y = 800;
</script>

<div class="grid w-full grid-cols-4 gap-5">
	<div class="col-span-3">
		<svg viewBox="0 0 1400 1800" class="w-full h-full">
			<rect
				x="0"
				y="0"
				width="1400"
				height="1800"
				stroke="#ccc"
				style="opacity: 0.5"
				fill="none"
				stroke-width="2"
			/>

			{#each { length: 8 } as _, i}
				{#if i < 6}
					<path d="M{(i + 1) * 200} 0 L{(i + 1) * 200} 1802" class="grid-line" />
				{/if}
				<path d="M0 {(i + 1) * 200} L1400 {(i + 1) * 200} " class="grid-line" />
			{/each}

			<path style="transform: translateX({x + 200}px)" d="M0 0 L0 1800" class="grid-line-xy" />
			<path style="transform: translateY({y}px)" d="M0 400 L1400 400" class="grid-line-xy" />
			<rect x="200" y="400" width="1000" height="1000" stroke="#fff" fill="none" stroke-width="2" />
			<g class="graph">
				<!-- <path d={$ease_path} stroke="#333" stroke-width="2" fill="none" /> -->

				<path
					d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
					fill="#ff3e00"
					style="transform: translate(1060px, {800 - 24}px)"
				/>

				<circle cx="500" cy="700" r="15" fill="#ff3e00" />
			</g>
		</svg>
	</div>
	<div class="col-span-1 border-l border-orange-600" />
</div>

<style>
	.grid-line {
		stroke: #ccc;
		opacity: 0.75;
		stroke-width: 2;
	}

	.grid-line-xy {
		stroke: tomato;
		stroke-width: 2;
	}
</style>
